<template>
  <div>
    <van-nav-bar
      title="城市列表"
      left-text="返回"
      right-text="选择省"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-tabs v-model:active="active">
      <van-tab title="实时" style="background: #fff">
        <div style="margin: 10px 0 10px 5px; padding-top: 10px">
          <span>{{ timestampToTime() }}</span>
        </div>
        <table>
          <!-- <caption>
          我是表格标题
        </caption> -->
          <!--表头-->
          <thead>
            <tr>
              <th>序号</th>
              <th>省</th>
              <th>城市</th>
              <th>
                <select @change="changes()" id="se">
                  <option value="1">pm25</option>
                  <option value="2">aqi</option>
                  <option value="3">pm10</option>
                  <option value="4">so2</option>
                  <option value="5">no2</option>
                  <option value="6">co</option>
                  <option value="7">o3</option>
                </select>
              </th>
              <th>主污染物</th>
            </tr>
          </thead>
          <!--表内容-->
          <tbody>
            <tr>
              <td>1</td>
              <td>{{ store.cityinfo }}</td>
              <td>{{ city }}</td>
              <td>{{ cityList.pm25 }}</td>
              <td>{{ cityList.primary_pollutant }}</td>
            </tr>
            <tr v-for="(item, index) in airList" :key="index">
              <td>{{ index + 2 }}</td>
              <td>{{ store.cityinfo }}</td>
              <td>{{ item.station }}</td>
              <td v-if="val=='1'">{{ item.pm25 }}</td>
              <td v-else-if="val=='2'">{{ item.aqi }}</td>
              <td v-else-if="val=='3'">{{ item.pm10 }}</td>
              <td v-else-if="val=='4'">{{ item.so2 }}</td>
              <td v-else-if="val=='5'">{{ item.no2 }}</td>
              <td v-else-if="val=='6'">{{ item.co }}</td>
              <td v-else-if="val=='7'">{{ item.o3 }}</td>
              <td>{{ item.primary_pollutant }}</td>
            </tr>
          </tbody>
        </table>
      </van-tab>
      <van-tab title="今日">内容2</van-tab>
      <van-tab title="昨日">内容3</van-tab>
      <van-tab title="本月">内容4</van-tab>
      <van-tab title="今年">内容4</van-tab>
      <van-tab title="去年">内容4</van-tab>
    </van-tabs>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { cityInfoStore } from '../../../store/index'
import { homeAir } from '@/service/cityService'

let val=ref("1")
let airList:any = ref([])
const store = cityInfoStore()
const router = useRouter()
const active = ref(0)
let cityList:any = ref([])
let city = ref('')

const changes=()=>{
  let select:any=document.getElementById('se');
  let index=select.selectedIndex
  val.value=select.options[index].value
}
const onClickLeft = () => {
  router.push('/analyse')
}
const onClickRight = () => {
  console.log(11)
  router.push('/analyse/selects')
  console.log(store.cityinfo)
}

let fulairList = async () => {
  let { data } = await homeAir({
    key: 'S_kv1Ro8FrmQ4UeD9',
    location: store.cityinfo,
    language: 'zh-Hans',
    scope: 'all'
  })
  airList.value = data.results[0].air.stations
  cityList.value = data.results[0].air.city
  city.value = data.results[0].location.name
}

onMounted(async () => {
  await fulairList()
})

//时间格式化
const timestampToTime = () => {
  var date = new Date() //时间戳为10位需*1000，时间戳为13位的话不需乘1000
  var Y = date.getFullYear() + '/'
  var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/'
  var D = date.getDate() + ' '
  var h = date.getHours() + ':'
  var m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
  // var s = date.getSeconds()
  return Y + M + D + h + m
}
</script>

<style lang="scss" scoped>
.header {
  height: 40px;
  background: #fff;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
  margin-bottom: 10px;
}
body {
  filter: invert(1) hue-rotate(270deg);
}
table {
  width: 100%;
  text-align: center;
  border-spacing: 0; /**设置相邻单元格的边框间的距离**/
  border-collapse: collapse; /**边框会合并为一个单一的边框**/
  color: #5a5a5a;
  table-layout: fixed; /**固定table表格**/
}
table thead {
  background-color: #d9edf7;
}
table td,
table th {
  border: 1px solid #ccc;
  overflow: hidden; /**溢出隐藏**/
  white-space: nowrap; /**不换行**/
  text-overflow: ellipsis; /**溢出不可见部分使用...代替**/
  select{
    border: 0;
    background: none;
  }
}
</style>
